<template>
	<div class="quanbu">
		<h2 class="h2">店铺列表</h2>
		<div class="tiaojian">
			可选择性搜索：
			<el-input v-model="shop.id" placeholder="店铺编号" style="width: 130px;"></el-input>+
			<el-input v-model="shop.shopName" placeholder="店铺名称" style="width: 150px;"></el-input>
			<el-button type="primary" @click="nameShop()" style="height: 20px;" plain>搜索</el-button>
			<el-button type="success" @click="getAddShop()" style="height: 20px;">添加</el-button>

		</div>
		<div class="list">
			<el-table :data="shop" style="width: 100%">

				<el-table-column label="头像" width="120">
					<template #default="scope">
						<el-image style="width: 80px; height: 80px; margin-left:10px;" :src="scope.row.headPortrait">
						</el-image>
					</template>
				</el-table-column>

				<el-table-column prop="id" label="编号" width="70">
				</el-table-column>
				<el-table-column prop="shopName" label="名称" width="130">
				</el-table-column>
				<el-table-column prop="phone" label="电话" width="120">
				</el-table-column>
				<el-table-column prop="address" label="地址" width="200">
				</el-table-column>
				<el-table-column prop="shopType" label="分类" width="100">
				</el-table-column>
				<el-table-column prop="grade" label="评分" width="70">
				</el-table-column>
				<el-table-column label="状态" width="80">
					<template #default="scope">
						<span v-text="getState(scope.row.state,0)"></span>
					</template>
				</el-table-column>
				<el-table-column prop="salesVolume" label="总销量" width="100">
				</el-table-column>
				<el-table-column prop="shopTime" label="建立日期" width="120">
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button v-if="scope.row.state==0" type="danger" @click="setState(scope.row.id,0)" v-text="getState(scope.row.state,1)"></el-button>
						<el-button v-else type="primary" @click="setState(scope.row.id,1)" v-text="getState(scope.row.state,1)"></el-button>
						
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="block">
			<!-- 分页 -->
			<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :small="small"
				:disabled="disabled" background layout="prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" @click="nameShop()">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import qs from "qs"
	import {
		ElNotification
	} from 'element-plus'
	export default {
		data() {
			return {
				shop: [{
					id: "",
					shopName: "",
					state: ""
					
				}],
				total: 0,
				pageSize: 10

			}
		},
		mounted() {
			this.nameShop()
			
		},
		methods: {
			
			nameShop() {
				this.$axios.get("/shop/likeShop", {
						params: {
							"id": this.shop.id,
							"shopName": this.shop.shopName,
							"current": this.currentPage
						}
					})
					.then(res => {
						this.shop = res.shop.records;
						console.log("headPortrait=" + this.shop[0].headPortrait);
						this.total = res.shop.total;
					})
			},
			getAddShop() {
				this.$router.push('/addShop')
			},
			getState(state,type) {
				if(type==0){
					if (state == 0) {
						return "正常";
					} else if (state == 1) {
						return "冻结";
					} else {
						return "审核中";
					}
				}else{
					if (state == 0) {
						return "冻结";
					} else if (state == 1) {
						return "解冻";
					} else {
						return "审核中";
					}
				}
				
			},
			setState(shopId,type) {
				this.shop.id = shopId
				this.shop.state = "0"
				if(type==0){
					this.shop.state = "1"
				}
				this.$axios.post("/shop/updateShop", qs.stringify(this.shop))
					.then(res => {
						if (res.judge) {
							ElNotification({
								title: '温馨提示',
								message: '操作成功！'
							})
							//页面刷新
							location.reload();
						} else {
							ElNotification({
								title: '温馨提示',
								message: '操作失败！'
							})
						}
					})
			},
			getShopInfo(shopId) {
				this.$router.push({
					name: 'UpdateShop',
					params: {
						shopId: shopId
					}
				})
			},

		}
	}
</script>

<style>
	.quanbu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 20px;
		margin-top: -10px;
	}

	.block {
		margin-top: 30px;
	}

	.common-layout .el-main {
		line-height: 40px;
	}

	.tiaojian {
		display: flex;
		padding-left: 650px;
	}

	.h2 {
		height: 20px;
	}
</style>
